//定义主题样式css变量
const theme = {
  default: {
    '--nav-background': '#fff', //导航栏默认背景色
    '--laout-header-color': '#5a5e66', //导航栏默认颜色
    '--left-menu-color': '#fff', //左侧菜单默认文字颜色
    '--sub-menu-active-color': 'rgb(64, 158, 255)', //子集menu选中文字颜色
    '--sub-menu-background': 'rgb(34, 45, 60)', //子级menu默认背景色
    '--left-menu-hover-background': 'rgb(41, 52, 68)', //左侧一级菜单鼠标移入颜色
    '--left-sub-menu-hover-background': 'rgb(4, 21, 39)', //左侧子级菜单hover颜色
    '--left-nav-show': '0px 0px 6px 0px rgb(0 0 0 / 10%)', //左侧菜单阴影
    '--menu-background': '#304156', //menu背景色
  },
};

//通过documentElement.style属性上的setProperty方法修改css变量
const style = document.documentElement.style;

/**
 * 修改整体风格颜色
 * @param {string} type 风格类型
 */
export function setTheme(type?: string) {
  const themeType = type ? theme[type] : theme['default'];
  for (const key in themeType) {
    style.setProperty(key, themeType[key]);
  }
}

/**
 * 自定义主体颜色
 * @param {string} color 颜色
 */
export function setRootColor(color: string) {
  // style.setProperty('', color);
}
